<template>
  <div>
    <el-table
    :data="arr"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="unit"
      label="上报单位"
      width="160">
    </el-table-column>
    <el-table-column
      prop="workDate"
      label="值班日期"
      width="160">
    </el-table-column>
    <el-table-column
      prop="date"
      label="上报时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="road"
      label="道路"
      width="160">
    </el-table-column>
    <el-table-column
      label="路况"
      width="160">
    <template slot-scope="scope"><span style="color:#FDB25D">{{ conditionObj[scope.row.condition] }}</span></template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <i class="el-icon-view"></i>
        <el-button 
        type="text"
        @click="handleShow( scope.row)">查看
        </el-button>
        <i class="el-icon-delete"></i>
        <el-button 
        type="text"
        @click="handleDelete( scope.row.id)">删除
        </el-button>
         
      </template>
    </el-table-column>
    
  </el-table>
  </div>
</template>

<script>
import { DeleteStByIdApi } from "../../../api/ljjApi";
import eventBus from '../../../untial/evevtBus'
export default {
  props:['arr'],
    data() {
      return {
        conditionObj:{//映射对象
            0:"畅通",
            1:"缓慢",
            2:"拥堵"
        },   
      }
    },
    methods: {
      handleShow(row){
        console.log('row',row);
        eventBus.$emit('handleShowFun',row)

      },
      handleDelete(id){
        DeleteStByIdApi({id:id}).then(res=>{
          // console.log(res);
          if(res.code==200){
            this.$emit('restArr')//删除成功刷新页面
          }
        })

      }
    },

}
</script>

<style lang="less" scoped>
.el-table{
    padding:0 20px;
    text-align: center;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.6);
    .el-icon-view{
        margin-right:5px;
        color: #689FFC;
    }
    .el-icon-delete{
        margin-right:5px;
        color:#E46959
    }
    .el-button--text{
        margin-right:10px;
        color: #333333;
    }
}

</style>